<template>
  <div class="Questionnaire">
    <a-form-model :rules="formConfig.rules" :model="formConfig.data" ref="form">
      <a-form-model-item
        v-for="(item, index) in formConfig.items.filter((i) => i.hide !== true)"
        :key="index"
        :prop="item.prop"
        class="form"
      >
        <div
          class="item"
          v-if="!item.type || item.type === 'radio' || item.type === 'checkbox'"
        >
          <div v-if="!type">
            <div class="item_title">
              <!-- <p>题干:</p> -->
              <a-input
                v-model.trim="item.title"
                :disabled="item.disabled"
                :placeholder="item.placeholder"
                type="textarea"
                @input="inputChange"
              >
              </a-input>
            </div>
            <div class="item_options">
              <!-- <p>选项:</p> -->
              <div
                class="option_item"
                v-for="(item2, index2) in item.answerList"
                :key="index2 + item.prop"
              >
                <p class="option_item_p">{{ index2 + 1 }}.</p>
                <a-input
                  v-model.trim="item2.value"
                  :disabled="item.disabled"
                  @input="inputChange"
                  placeholder="请输入选项"
                >
                </a-input>
                <a-icon
                  v-if="item.answerList.length > 1"
                  class="dynamic-delete-button"
                  type="minus-circle-o"
                  :disabled="item.answerList.length === 1"
                  @click="removeDomain(item2, index)"
                />
              </div>
            </div>
            <div class="item_add">
              <a-button
                type="dashed"
                style="width: 100%"
                @click="addDomain(index)"
              >
                <a-icon type="plus-circle" /> 添加选项
              </a-button>
            </div>
          </div>
          <!-- 单选题预览效果 -->
          <div v-else>
            <p class="PSQtitle">{{ item.name }}</p>
            <div v-if="item.type === 'radio'">
              <a-radio-group v-model="formConfig.data[item.prop]">
                <a-radio
                  :style="radioStyle"
                  :value="index2"
                  v-for="(item2, index2) in item.answerList"
                  :key="index2 + item.prop"
                >
                  {{ item2.value }}
                </a-radio>
              </a-radio-group>
            </div>
            <!-- 多选题预览效果 -->
            <div v-if="item.type === 'checkbox'">
              <a-checkbox-group v-model="formConfig.data[item.prop]">
                <a-checkbox
                  :style="radioStyle"
                  :value="index2"
                  v-for="(item2, index2) in item.answerList"
                  :key="index2 + item.prop"
                >
                  {{ item2.value }}
                </a-checkbox>
              </a-checkbox-group>
            </div>
          </div>
        </div>
        <div class="item" v-if="item.type === 'text'">
          <div v-if="!type">
            <div class="item_title">
              <!-- <p>题干:</p> -->
              <a-input
                v-model.trim="item.title"
                :disabled="item.disabled"
                @input="inputChange"
                :placeholder="item.placeholder"
                type="textarea"
              >
              </a-input>
            </div>
            <!-- <div class="item_subjectiveItem">
              <p class="subjectiveItem_item_p">提示:</p>
              <a-input
                v-model.trim="item.answerList[0].prompt"
                :disabled="item.disabled"
                @input="inputChange"
                placeholder="请输入提示"
                type="textarea"
              >
              </a-input>
            </div> -->
          </div>
          <div v-else>
            <p class="PSQtitle">{{ item.title }}</p>
            <!-- <div class="Prompt">
              <p class="Prompt_title">提示:</p>
              <p>{{ item.answerList[0].prompt }}</p>
            </div> -->
            <p class="subjectiveItem_item_p">你的回答:</p>
            <a-input
              v-model.trim="formConfig.data[item.prop]"
              @input="inputChange"
              :disabled="item.disabled"
              placeholder="请输入提示文字"
              type="textarea"
            >
            </a-input>
          </div>
        </div>
        <!-- <a-input
          v-if="!item.type || item.type === 'input'"
          v-model.trim="formConfig.data[item.prop]"
          :disabled="item.disabled"
          :placeholder="item.placeholder"
          @change="handleEvent(item.event, formConfig.data[item.prop])"
        >
          <a-icon
            slot="prefix"
            :type="item.icon"
            style="color: rgba(0,0,0,.25)"
          />
        </a-input>
        <a-checkbox
          v-if="item.type === 'check'"
          @change="handleEvent(item.event, formConfig.data[item.prop])"
        >
          Remember me
        </a-checkbox>
        <a-select
          v-if="item.type === 'select'"
          v-model.trim="formConfig.data[item.prop]"
          style="width:100%"
          @change="handleEvent(item.event, formConfig.data[item.prop])"
        >
          <a-select-option value="rmb">RMB</a-select-option>
          <a-select-option value="dollar">Dollar</a-select-option>
        </a-select> -->
      </a-form-model-item>
      <slot name="content"></slot>
      <slot name="default"></slot>
    </a-form-model>
    <!-- 插槽部分 -->
  </div>
</template>
<script>
export default {
  components: {},
  props: {
    formConfig: {
      type: Object,
      default: () => {
        return {};
      },
    },
    type: {
      type: Boolean,
      default: () => {
        return false;
      },
    },
  },
  data() {
    return {
      arr: [1, 2, 3, 4],
      radioStyle: {
        display: "block",
        height: "30px",
        lineHeight: "30px",
      },
    };
  },
  computed: {},
  created() {
    //this.nextTick(() => {});
  },
  mounted() {},
  methods: {
    // 绑定的相关事件
    handleEvent(event, value) {
      if (event) {
        this.$emit("handleEvent", event, value);
      }
    },
    removeDomain(item, i) {
      let index = this.formConfig.items[i].answerList.indexOf(item);
      if (index !== -1) {
        this.formConfig.items[i].answerList.splice(index, 1);
      }
    },
    addDomain(index) {
      // console.log();
      let len = this.formConfig.items[index].answerList.length;
      this.formConfig.items[index].answerList.push({
        value: `选项${Number(len) + 1}`,
        key: Date.now(),
      });
    },
    inputChange() {
      this.$forceUpdate();
    },
  },
};
</script>
<style lang="scss">
.Questionnaire {
  box-sizing: border-box;
  width: 100%;
  .form {
    text-align: left;
  }
  .item {
    .option_item {
      display: flex;
      justify-content: center;
      align-items: center;
      margin: 10px 0;
      .option_item_p {
        text-align: center;
        width: 30px;
        margin: 0;
        padding: 0;
      }
      .dynamic-delete-button {
        width: 20px;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .item_add {
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }
  }
  .ant-checkbox-wrapper + .ant-checkbox-wrapper {
    margin: 0;
  }
  .PSQtitle {
    font-size: 16px;
    font-weight: bold;
  }
  .Prompt {
    display: flex;
    .Prompt_title {
      margin-right: 0.5rem;
    }
  }
}
</style>
